<template>
	<view class="content">
		<view class="top">
			<up-image :src="bg" width="100%" height="700rpx"></up-image>
			
			<view class="info">
				<up-image :src="logo" height="120rpx" mode="heightFix" class="logo"></up-image>
				<view class="product">数字工会平台</view>
			</view>
		</view>

		<view class="login-btn">
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="getPhoneNumber" :class="loginDisabled ? 'disable-btn':'btn'" :disabled="loginDisabled" @getphonenumber="getPhoneNumber">手机号快捷登录</button>
			<!-- #endif -->
			
			<!-- #ifdef H5 -->
			<button :class="loginDisabled ? 'disable-btn':'btn'" :disabled="loginDisabled" @tap="loginByH5">授权登录</button>
			<!-- #endif -->
		</view>

		<view class="agreement">
			<up-checkbox
				:customStyle="{marginTop: '30rpx'}"
				name="agree"
				usedAlone
				@change="handleCheckboxChange">
				<template #label>
					<text class="common">我已阅读并同意</text>
					<text class="highlight" @tap.stop="getUserAgreement">《用户服务协议》</text>
					<text class="common">和</text>
					<text class="highlight" @tap.stop="getPrivacyAgreement">《隐私政策》</text>
				</template>
			</up-checkbox>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<!-- <view class="mobile-login-link" @tap="nav2VerifyCode">手机验证码登录</view> -->
		<!-- #endif -->
	</view>
</template>

<script>
	import bg from '@/static/images/login/bg.png'
	import logo from '@/static/images/logo.png'
	import { wxLogin,showConfirm  } from '@/utils/common'; 
	import { loginApi } from '../../api/login/login-api';
	export default {
		data(){
			return {
				loginDisabled: true,
				bg,
				logo,
				isAgree: false, // 初始状态为未选中
				wechatPublicCode: '', // 微信公众code
				options: {}
			}
		},
		mounted() {
		    //this.getCodeFromUrl();
		},
		onLoad(options) {
			this.options = options
			// #ifdef H5
			const app = getApp();
			const userInfo = app.globalData.currentUser;
			this.loginByH5(userInfo);
			// #endif
			
		},
		methods:{
			nav2VerifyCode(){
				uni.navigateTo({
					url:'/pages/user/login'
				})
			},
			handleCheckboxChange(event) {
				this.isAgree = event;
				this.loginDisabled = !event;
			},
			async getPhoneNumber(e){
				if(!this.isAgree){
					uni.showToast({
						icon: 'none',
						title: '请阅读并同意《用户服务协议》、《隐私政策》',
					});
					return;
				}
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					uni.showLoading({ title: '登录中' });
					const loginCode = await wxLogin();
					const wxUser = await loginApi.getWxUserInfo({code:loginCode});
					// 用户点击了允许授权
					const { code,encryptedData, iv } = e.detail;
					let formData = {
						code:code,
						openId:wxUser.data.openId,
						unionId:wxUser.data.unionId,
						source:0
					}
					this.$store.dispatch('LoginByWx', formData).then(res => {
						uni.showToast({ title: '登录成功' });
						// 设置用户信息
						this.$store.dispatch('GetInfo').then(res => {
							// walking 跳转到健步走列表
							// if (this.options.type == 'walking') {
							// 	uni.reLaunch({ url: '/brisk-walking/index?type=1' });
							// } else {
							// 	uni.switchTab({ url: '/pages/mine/index' });
							// }
							uni.navigateBack({
								delta: 1
							})
						  
						})
					}).catch((error) => {
						console.log('error:',error);
						uni.showToast({
							icon: 'none',
							title: error,
							duration:3000
						});
					})
				}else {
					uni.showToast({
					  title: '你拒绝了授权，无法获取手机号',
					  icon: 'error'
					});
				}
					
			},
			loginByH5(userInfo){
				uni.showLoading({ title: '登录中' });
				let formData = {
					phone:userInfo.memberPhone,
					openId:userInfo.openId,
					unionId:userInfo.unionid,
					source:1
				}
				this.$store.dispatch('LoginByWx', formData).then(res => {
					uni.showToast({ title: '登录成功' });
					// 设置用户信息
					this.$store.dispatch('GetInfo').then(res => {
					  uni.reLaunch({ url: '/brisk-walking/index?type=1' });
					})
				}).catch((error) => {
					uni.showToast({
						icon: 'none',
						title: error,
						duration:3000
					});
				})
			},
			getCodeFromUrl() {
				const urlParams = new URLSearchParams(window.location.search);
				this.wechatPublicCode = urlParams.get('code');
				if(this.wechatPublicCode){
					uni.showToast({
						title: this.wechatPublicCode
					})
				}
			},
			// 用户协议
			getUserAgreement() {
				uni.navigateTo({
					url: `/brisk-walking/activityRules?type=4`
				})
			},
			// 隐私协议
			getPrivacyAgreement() {
				uni.navigateTo({
					url: `/brisk-walking/activityRules?type=5`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
	  height: 100vh;
	  width: 100vw;
	  background-color: #eee;
	  box-sizing: border-box;
	  // padding: 0 40rpx;
	}
	.top {
		position: relative;
		.info {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		
		.logo {
			top: 100rpx;
		}
		
		.product {
			padding: 30rpx 0;
			font-size: 48rpx;
			font-weight: bold;
			color: #fff;
		}
	}
	
	.login-btn{
	  margin: 150rpx 40rpx 30rpx 40rpx;
	  .btn{
		  background-color: rgba(246, 0, 0, 1);
		  color:#fff;
		  border-radius: 50rpx;
	  }
	  .disable-btn{
		  background-color: #ccc;
		  color:#fff;
		  border-radius: 50rpx;
	  }
	}
	
	.agreement{
		margin: 0 40rpx;
	}
	.common {
		font-size: 28rpx;
		color: $uni-text-color-grey;
	}
	.highlight {
		font-size: 28rpx;
		color: $uni-color-info;
	}
	.mobile-login-link{
	  color: $uni-color-info;
	  font-size: 14px;
	  margin-top: 150px;
	  text-align: center;
	}
</style>